<!--
 * @Date: 2023-09-14 17:36:50
 * @LastEditTime: 2023-10-12 11:34:14
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('wei-gui-ci-lu-ru-shen-qing')"
  }
}
</route>
<script lang="ts" setup>
import { apiAddBan, ApiAddBan } from "@@/api/wk/index";
import router from "@@/router";
import { isNonNullStr } from "@@/utils/tools/is";
import { FormInstance } from "vant";

const { t } = useI18n();

const form = reactive<ApiAddBan.Req>({
  explain: "",
  word: "",
});
const btnLoading = reactive({
  submit: false,
});

async function submit() {
  btnLoading.submit = true;
  await apiAddBan(form);
  btnLoading.submit = false;
  router.back();
}
const vanFormRef = ref<FormInstance>();
</script>
<template>
  <CpageView>
    <van-form @submit="submit" ref="vanFormRef">
      <div class="auto-MT-md">
        <div class="C-T4">{{ $t("guan-jian-ci") }}</div>
        <Ccard class="MT-xs PD-sm">
          <Rinput
            v-model="form.word"
            :placeholder="$t('qing-tian-xie-gai-zi-duan')"
            maxlength="30"
            :rules="[
              {
                validator: isNonNullStr,
                message: $t('qing-tian-xie-gai-zi-duan'),
              },
            ]"
          />
        </Ccard>
        <div class="C-T4">{{ $t("wei-gui-shuo-min") }}</div>
        <Ccard class="MT-xs PD-sm">
          <Rinput
            v-model="form.explain"
            required
            :placeholder="$t('qing-tian-xie-gai-zi-duan')"
            :type="'textarea'"
            :autosize="{ minHeight: 0, maxHeight: 200 }"
            maxlength="256"
            showWordLimit
            :rules="[
              {
                validator: isNonNullStr,
                message: $t('qing-tian-xie-gai-zi-duan'),
              },
            ]"
            class="inputBox"
          />
        </Ccard>
        <Rbutton
          :loading="btnLoading.submit"
          @click="vanFormRef?.submit"
          class="MT-lg"
          :size="'large'"
          bg="var(--C-M1)"
        >
          {{ $t("sheng-qing-sheng-he") }}
        </Rbutton>
      </div>
    </van-form>
  </CpageView>
</template>
<style lang="scss" scoped></style>
